{{extend '../_layouts/home.html'}}

{{block 'title'}}{{'多人博客 - 首页'}}{{/block}}
{{block "head"}}
<style>
    .ui-upload {
        
      height: 30px;
      width: 100%;
      background-color: #00abff;
      font-size: 14px;
      line-height: 30px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 3px;
      
    }
  </style>
{{/block}}
{{block 'body'}}
<section class="container">
  {{include '../_partials/settings-nav.html'}}
 
  <div class="col-md-2 profile-avatar">
    <dl>
      <dt>头像设置</dt>
      <dd>
        <img id="previewImg" class="avatar" width="100%" src="{{user.avatar}}" alt="">
        <div style="padding-top:15px">
            <label for="upload" class="ui-upload">upload</label>
            <input type="file" accept="image/png,image/jpeg,image/gif,image/jpg" id="upload" style="display: none;" />
        </div>
      </dd>
    </dl>
    <button type="button" id="imgBtn" class="btn btn-success">保存</button>
  </div>
</section>
{{/block}}
{{block "script"}}
<script>
    var upImg = document.querySelector("#upload");
	  upImg.onchange =function (){
        var file = upImg.files[0];
		var fileReader = new FileReader();
		fileReader.readAsDataURL(file);

		fileReader.onload = function(){
            $(previewImg).attr("src",fileReader.result)
        }
    }

    $('#imgBtn').on('click',function(){
         var formData = new FormData();
        formData.append('myFile',document.getElementById('upload').files[0]);
          
           //jq默认头是content-type: www-url..... 键值对
           $.ajax({  // Illegal invocation
                url:'/upload',
                type:'post',
                data:formData,  //当传递formData的时候，就会默认将该对象转换成键值对字符串，不合理的
                //jq上传文件必须要以下两个属性
                contentType:false,//不需要头
                processData:false,//不转换数据
                success:function(){
                    console.log('ok');
                    alert("修改成功")
                    window.location.href = "/"
                },
                error:()=>{
                    console.log("失败")
                }
           })
        })
</script>
{{/block}}

